<template>
  <div class="photo-message pointer">
    <EncryptImage
      :src="url"
      :border-radius="10"
      :width="imgLength"
      :height="imgLength"
      @loadeddata="loading = false"
      click-to-full
    ></EncryptImage>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useAppStore } from '@/store/app'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'

const props = defineProps({
  url: { type: String },
  self: { type: Boolean, default: false },
})

const loading = ref(true)
const imgLength = computed(() => (loading.value ? 200 : undefined))

const { appConfig } = useAppStore()
const { img_url: imgHost } = appConfig.config
const url = computed(() => {
  try {
    const { pathname } = new URL(props.url)
    return `${imgHost}${pathname}`
  } catch (e) {
    return `${imgHost}${props.url}`
  }
})
</script>
